<!--  -->
<template>
  <div class="bar">
    <div class="container">
      <h1><span>上影推荐</span></h1>
      <div class="txt">
        <span>
           <span v-if="tuidesc.length < maxLen"> <!--如果小于最长长度则显示全部内容 -->
            <span class="tj">{{ this.tuidesc }}</span>
          </span>
          <span v-else><!--否则显示以下元素 -->
            <span class="tj">{{ showBtn ? sliceStr : this.tuidesc }} <!--如果showBtn为true则展示部分内容，为false展示全文 -->
              <span class="btnWord" @click="showBtn = !showBtn">{{ showBtn ? "全文" : "&nbsp;&nbsp;&nbsp;收起" }}</span> <!--如果之前的showBtn为假，则显示全文按钮，如果之前的showBtn为真，则显示收起按钮 -->
            </span>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "text-box",
  data() {
    return {
      showBtn: true,
      maxLen: {
        type: Number,
        default: 20
      },
    };
  },
  props: {
    content: {
      type: String,
    }
  },
  mounted() {

  },
  computed: {
    ...mapState({
      tuidesc: (state) => state.Detail.Detail.tuiDesc
    }),
    sliceStr() {
      if (this.tuidesc != null) {
        console.log(this.tuidesc.substring(0, 20));
        console.log(this.tuidesc.substring(0, 30) + "...");
        return this.tuidesc.substring(0, 55) + "...";

      }
      return '';
    }
  }
};
</script>
<style lang='less' scoped>
.bar{
  border-top: solid rgb(238,238,238,1) 0.01rem;
  margin-left: 0.43rem;
  margin-right: 0.43rem;
  
}
div {
  h1 {
    font-size: 0.38rem;
    margin-top: 0.43rem;
    
  }
}

.container {
  border-top: solid #eee 0.02rem;
}

.txt {
  letter-spacing: 0.02rem;
  word-break: break-all;
  line-height: 0.5rem;
  font-size: 0.33rem;
  padding-top: 0.3rem;

}

.tj {
  text-align: justify;
}

.btnWord {
  color: cornflowerblue;
  cursor: pointer;
  word-break: keep-all;
}
</style>